<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";

import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);


const online_list1 = ref([
    {
      id: "1",
      title: '分担您对失败交易的顾虑',
      subTitle: "围绕提升支付成功率的使命，收入增长引擎推出多款细分产品降低交易失败的风险，让您专注经营。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/booster-card1.6f62da10.svg'
    },
    { 
      id: "2",
      title: '智能决策引擎提升决策效率',
      subTitle: "基于海量数据和机器学习做出智能判断，提升决策准确性和有效性。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/booster-card2.b81a6689.svg'
    },
    { 
      id: "3",
      title: '支持新兴支付方式',
      subTitle: "与电子钱包深度集成，可以向钱包用户提供更直观的支付结果通知和充值引导，缩短挽回失败交易的链路。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/booster-card3.6c850472.svg'
    }
 ])


 const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*clwFQIsvpwUAAAAAAAAAAAAADmesAQ/fmt.webp',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*O3PgQ7vux6cAAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})


/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};



onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();

})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <v-app>
    <!-- 主图-->
     <banner-main
      themeColor="black"
      :lists_bottom="online_list1"
      :lists="carousel_Images" 
      title="收入增长引擎" 
      subTitle="我们利用前沿的算法模型和数据分析，打造更智能的支付环境，致力于提升支付全生命周期的成功率。支付能力查询、智能重试和挽回交易等功能助力支付成功率更上一层楼，激活更多营收。"
     ></banner-main>
     <div class="mx-auto w-9/12 d-flex text-center">
        <div class="w-6/12 d-flex justify-center align-center">
          <v-img width="960px" height="720px" cover src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/capability-pay.059879dd.svg"/>
        </div>
        <div class="w-6/12 d-flex flex-column justify-center align-center">
          <div class="mx-auto w-6/12 d-flex flex-column ">
            <span class="text-left text-[32px] font-bold">用户支付能力查询</span>
            <span class="text-left text-[20px] mt-10">用户付款前，实时查询用户的支付能力画像，规避因用户钱包状态异常等原因导致的交易失败，大幅提高交易转化率。</span>
          </div>
        </div>
    </div>
     <div class="mx-auto w-9/12 d-flex text-center">
        <div class="w-6/12 d-flex flex-column justify-center align-center">
          <div class="mx-auto w-6/12 d-flex flex-column ">
            <span class="text-left text-[32px] font-bold">智能重试</span>
            <span class="text-left text-[20px] mt-10">针对因系统不可用等原因而受阻的交易，利用蚂蚁前沿的算法模型和技术，识别最佳的重试时间点，将支付失败可能性降到最低。</span>
          </div>
        </div>
        <div class="w-6/12 d-flex justify-center align-center">
          <v-img width="960px" height="720px" cover src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/capability-reset.21067b79.svg"/>
        </div>
    </div>
     <div class="mx-auto w-9/12 d-flex text-center">
        <div class="w-6/12 d-flex justify-center align-center">
          <v-img width="960px" height="720px" cover src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/capability-tosave.c4549e43.svg"/>
        </div>
        <div class="w-6/12 d-flex flex-column justify-center align-center">
          <div class="mx-auto w-6/12 d-flex flex-column ">
            <span class="text-left text-[32px] font-bold">失败交易挽回</span>
            <span class="text-left text-[20px] mt-10">针对周期性扣款场景，让顾客更清晰感知扣款结果，提醒用户及时充值，挽回更多的失败交易。</span>
          </div>
        </div>
    </div>

    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>

</style>